<template>
  <view class="aggregation" style="transform: scaleY(-1);">
  	<view class="aggregation-msg">
  		{{message.content_text}}
  	</view>
  	<view class="aggregation-num">
  		<view><i class="large">x<span class="large-num">{{repeatTimes}}</span></i></view>
  		<view v-for="i in repeatMsgList" :key="i.from_account">
  			<span class="personal">{{ i.username }}</span><i>x<span v-if="i.times > 1">{{ i.times }}</span></i>
  		</view>
  	</view>
  	<view class="aggregation-add">
  		<up-button icon="plus-circle" iconColor="#fd9100" @click="repeat(item)" size="small" shape="circle" text="加一个"></up-button>
  	</view>
  </view>
</template>

<script>
import { chatApi } from '@/apis/cloud/chat'
	
export default {
  name: 'AggregateMessage',
  props: {
    message: {
      type: Object,
      required: true
    },
    continuous: {
      type: Boolean,
      default: false,
    },
    imInfo: {
      type: Object
    },
		userInfo: {
		  type: Object
		}
  },
  data() {
		return {
			repeatMsgList: {},
			repeatTimes: 0,
		}
	},
	computed: {
		id() {
			return this.message.id;
		}
	},
	created() {
		console.log('this.message', this.message)
		
		this.listRelatedMsg();
		uni.$on(`update-msg-follower`, (data) => {
			if(data.id == this.id) {
				let list = this.unshiftSelf(data.follower);
				this.repeatMsgList = list;
				let times = list.map(i => i.times).reduce((a, b) => a + b)
				this.repeatTimes = times;
			}
		})
	},
	methods: {
		async listRelatedMsg() {
			const params = {
				'data[relationType]': 'repeat',
				'data[mid]': this.id,
				url: 'index.php/users/message/aggrRelatedMsg'
			}
			const resp = await chatApi(this.userInfo.token, params);
			let list = this.unshiftSelf(resp.data);
			this.repeatMsgList = list
			let times = list.map(i => i.times).reduce((a, b) => a + b)
			this.repeatTimes = times;
		},
		unshiftSelf(arr) {
			let $self = arr.find(i => i.from_account == this.message.from_account || i.from_phone == this.message.from_phone)
			if ($self) {
				$self.times += 1;
				$self.send_time = this.message.send_time;
				$self.id = this.message.id
			} else {
				let { username, id, send_time, from_account, from_phone, times = 1 } = this.message
				arr.unshift({ username, id, send_time, from_account, from_phone, times })
			}
			arr.sort((a, b) => new Date(a.send_time) < new Date(b.send_time))
			return arr
		},
		async repeat() {
			const params = {
				'data[account]': this.imInfo.account,
				'data[mid]': this.message.id,
				url: 'index.php/users/message/repeat'
			}
			const msg = await chatApi(this.userInfo.token, params);
		}
  }
};
</script>

<style lang="scss" scoped>
.aggregation {
	background-color: #fff;
	margin: 10px 20px;
	padding: 0 10px 10px 10px;
	border-radius: 16rpx;
	border: 1px solid #ddd;
}
.aggregation-msg {
	font-size: 15px;
	margin: 10px 0 6px 0;
}
.aggregation-num {
	display: flex;
	align-items: center;
	font-size: 16px;
	border-top: 0.5px solid #e5e5e5;
	// border-bottom: 0.5px solid #e5e5e5;
	padding: 10px 0;
	view {
		margin-right: 10px;
	}
	i {
		color: #fd9100;
		font-weight: 550;
	}
	.num {
		font-weight: 700;
		font-size: 14px;
	}
	.large {
		font-size: 18px;
	}
	.large-num {
		font-size: 20px;
		margin-right: 4px;
	}
	.personal {
		font-size: 15px;
	}
}
</style>
